<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网关信息</title>
        <style>
            span{
                margin: 10px;
                padding: 5px;
            }
            #upID{
                background-color: aqua;
            }
            #downID{
                background-color: yellow;
            }
            .btn{
                border: none;
                background-color: lightgray;
                width: 80px;
                height: 35px;
                margin: 10px;
                border-radius: 5px;
                box-shadow: 5px 5px 5px lightblue;
            }
            .btn:hover{
                opacity: 0.8;
            }
            .btn:active{
                background-color: lightblue;
            }
            .btn-error{
                background-color: red;
                color: white;
            }
        </style>
    </head>
    <body>
        <div>
            <h3>网关信息</h3>
            <div>
                <b>上行数据</b>
                <span id="upID"></span>
                <b>下行数据</b>
                <span id="downID"></span>
            </div>
            <div>
                <button class="btn btn-error" onclick="restart_filter()">重启防火墙</button>
            </div>
        </div>
        <script>
            let interValId = 0;
            window.onload = function(){
                loaddata();
                interValId = setInterval(()=>{
                    loaddata();
                }, 1000);
            }

            let byteNames = ["bytes", "K", "M", "G", "T"];
            function getByteByName(nBytes){
                console.log(nBytes, "----", typeof(nBytes));
                let i =0; // 下标
                while( parseInt(nBytes / 1024) > 0){
                    i++;
                    nBytes = nBytes / 1024;
                }
                let s =""+ nBytes;
                return  s.substring(0, s.indexOf(".")+3) + byteNames[i];
            }

            function loaddata(){
                fetch("/cgi-bin/data").then(resp=>resp.json()).then(data=>{
                    console.log(data);
                    if(data.code == 0){
                        let { up_byte, down_byte } = data.bytes;
                        console.log(up_byte, down_byte);
                        // 将字节数据转化人性化的单位数据
                        upID.innerText = getByteByName(parseInt(up_byte));
                        downID.innerText = getByteByName(parseInt(down_byte));
                    }
                })
            }
            function restart_filter(){
                clearInterval(interValId);
                fetch("/cgi-bin/restart").then(resp=>resp.json()).then(data=>{
                    alert(data.msg);
                    interValId = setInterval(()=>{
                        loaddata();
                    }, 1000);
                })
            }
            // 当窗口关闭时，停止定时器
            window.onclose = function(){
                clearInterval(interValId);
            }
        </script>
    </body>
</html>